<template>
  <div class="designer-container" v-loading="loading">
    <!-- 主设计区域 -->
    <div class="design-area">
      <!-- 模型选择下拉框 -->
      <div class="model-selector">
        <el-select
            v-model="selectedModelId"
            placeholder="选择模型"
            @change="handleModelChange"
            popper-class="model-select-dropdown"
        >
          <el-option
              v-for="model in filteredModels"
              :key="model.id"
              :label="model.name"
              :value="model.id"
          />
        </el-select>
      </div>

      <!-- 3D 视图 -->
      <div
          class="view-container"
          :class="{
          'active-view': currentView === '3D',
          'placing-text': isPlacingText,
          'placing-image': isPlacingImage
        }"
      >
        <canvas-3d
            :canvas-texture="canvasTexture"
            :disable-controls="isPlacingText || isDraggingText || isInTextProperties"
            :is-screenshotting="isScreenshotting"
            @interact="handleInteract"
        />

        <!-- 放置文本提示 -->
        <div v-if="isPlacingText" class="placement-hint">
          Click anywhere on the jersey to place your text
        </div>

        <!-- 放置图片提示 -->
        <div v-if="isPlacingImage" class="placement-hint">
          Click anywhere on the jersey to place your image
        </div>
      </div>

      <!-- 2D 视图 (默认隐藏) -->
      <div
          class="view-container"
          :class="{ 'active-view': currentView === '2D' }"
      >
        <design-canvas
            ref="designCanvas"
            @canvas-update="handleCanvasUpdate"
            @init="handleDesignInit"
        />
      </div>

      <!-- 视图切换按钮 -->
      <button
          class="view-toggle-button"
          @click="toggleView"
          :title="`切换到${currentView === '3D' ? '2D' : '3D'}视图`"
      >
        <i :class="currentView === '3D' ? 'el-icon-edit' : 'el-icon-box'"></i>
      </button>
    </div>

    <!-- 侧边栏 -->
    <design-sidebar
        :current-view="currentView"
        :selected-object="selectedObject"
        :has-selection="hasSelection"
        :is-placing-image="isPlacingImage"
        @add-text="handleAddText"
        @add-image="handleImageSelect"
        @select-decoration="handleSelectDecoration"
        @delete-decoration="handleDeleteDecoration"
        @update-selected-object="handleTextUpdate"
        @take-screenshot="handleScreenshot"
    />
  </div>
</template>

<script>
import { debounce } from 'lodash';
import { mapState, mapGetters } from 'vuex';
import Canvas3d from '../components/Canvas3D.vue';
import DesignCanvas from '../components/DesignCanvas.vue';
import DesignSidebar from '../components/DesignSidebar.vue';

export default {
  name: 'DesignerComp',
  components: {
    Canvas3d,
    DesignCanvas,
    DesignSidebar
  },
  data() {
    return {
      canvasTexture: null,
      currentView: '3D',
      hasSelection: false,
      selectedObject: null,
      fabricCanvas: null,
      designControls: null,
      isPlacingText: false,
      isDraggingText: false,
      isScreenshotting: false,
      isPlacingImage: false,
      pendingImageFile: null,
      isInTextProperties: false,
      selectedModelId: '',
      loading: true,
    };
  },
  computed: {
    ...mapState({
      selectedModel: state => state.models,
      models: state => state.models.models,
      selectedProductType: state => state.designs.selectedProductType,
      decorations: state => state.decorations.items
    }),
    ...mapGetters({
      selectedDesign: 'designs/selectedDesign'
    }),
    filteredModels() {
      return this.models.filter(m => m.productType === this.selectedProductType);
    }
  },
  created() {
    // this.getUserToken()
    this.getList()
    this.getColors()
    this.getFonts()
  },
  methods: {
    getUserToken() {
      this.$http.post('/api/v1/auth/login', {email: 'dts@koomaxsports.com', password: '123456'}).then((res) => {
        const token = res.data.result.token
        sessionStorage.setItem('clothesToken', token);
        this.getList()
        this.getColors()
        this.getFonts()
      })
    },
    getList() {
      // const res1 = [
      //   {
      //     "createDate": "2023-10-24T17:59:50.000+0000",
      //     "updateDate": "2025-03-02T15:06:44.000+0000",
      //     "name": "DTS BASEBALL_M_PRO LINE BREEZE SHORT SLEEVE 2-BUTTON BASEBALL JERSEY - WOVEN",
      //     "id": 494,
      //     "genderId": 84,
      //     "description": "PRO LINE BREEZE SHORT SLEEVE 2-BUTTON BASEBALL JERSEY - WOVEN",
      //     "status": 1,
      //     "url": "pattern/1709052729109.png",
      //     "part": "BA-MSS01-PRO",
      //     "mainFabric": "140g Spandex Woven",
      //     "fabricOne": "",
      //     "fabricTwo": "",
      //     "seq": 1,
      //     "model": "{\"name\":\"DTS BASEBALL_M_PRO LINE BREEZE SHORT SLEEVE 2-BUTTON BASEBALL JERSEY - WOVEN\",\"model\":\"arrow/2023-07/13/9d4471fe-a13f-4006-bf5e-ef0b0aa50097\",\"patterns\":[{\"name\":\"P01\",\"sizes\":{\"3D\":\"spear/2023-07/19/442a74b6-db9a-44b0-9261-fdab201cfef9\",\"L\":\"spear/2023-07/19/68da27d1-6f7c-4f5c-bf21-e3a5491354c2\"}},{\"name\":\"P02\",\"sizes\":{\"3D\":\"spear/2023-10/30/4a7b0ad8-0db4-4232-b914-488e007fe110\",\"L\":\"spear/2023-10/30/8860f4af-8067-494f-8589-0f2efcea3a2e\"}},{\"name\":\"P03\",\"sizes\":{\"3D\":\"spear/2023-10/30/58aede4c-9496-4354-998c-110f9e60ec4d\",\"L\":\"spear/2023-10/30/33311b64-3be9-4754-9626-e28a3f689858\"}},{\"name\":\"P04\",\"sizes\":{\"3D\":\"spear/2023-10/30/4c2ffd02-de08-4571-8a91-866dfb81a50d\",\"L\":\"spear/2023-10/30/6dd9bae9-f11f-4d61-ae34-b1abcc237fcd\"}},{\"name\":\"P05\",\"sizes\":{\"3D\":\"spear/2023-10/30/fd2334a1-677b-4651-b7db-85b6b0af813b\",\"L\":\"spear/2023-10/30/5808a4cf-4236-41b6-9a49-57d104c6f152\"}},{\"name\":\"P06\",\"sizes\":{\"3D\":\"spear/2023-11/09/4606d2ac-bf46-4567-96dd-3007f88bec58\",\"L\":\"spear/2023-11/09/45594e57-59f8-4b84-a61f-5da4faca9b74\"}},{\"name\":\"P07\",\"sizes\":{\"3D\":\"spear/2023-11/22/0d999aaf-c0d6-415c-a51e-9fa6ad974df3\",\"L\":\"spear/2023-11/22/c02ba58d-82bc-4fe3-b96d-2e32f9e189aa\"}},{\"name\":\"P08\",\"sizes\":{\"3D\":\"spear/2023-11/22/81adea3c-67c4-4f06-af10-670004ff30d8\",\"L\":\"spear/2023-11/22/449fb08f-2e5e-4a04-a73f-ea0569f6b209\"}},{\"name\":\"P09\",\"sizes\":{\"3D\":\"spear/2023-11/22/ae6f8749-ab22-449b-81c0-846d76e42c7f\",\"L\":\"spear/2023-11/22/a776bb77-71d3-4e8d-8345-f58cd181dd5f\"}},{\"name\":\"P10\",\"sizes\":{\"3D\":\"spear/2023-11/22/bc510698-a36c-4522-bf90-861d65c684f3\",\"L\":\"spear/2023-11/22/91fb7c69-69c2-4aec-a9c5-52110059ec54\"}},{\"name\":\"P11\",\"sizes\":{\"3D\":\"spear/2023-11/22/8b174709-5969-49c7-a7a1-b82a05765f5d\",\"L\":\"spear/2023-11/22/c398cbdb-fe51-4039-9b5d-5e08b28cabc2\"}},{\"name\":\"P12\",\"sizes\":{\"3D\":\"spear/2023-11/22/bcfa6916-296c-4c27-8646-ba859b13834d\",\"L\":\"spear/2023-11/22/367def64-5ae2-4770-bef2-dd9d93c3004e\"}},{\"name\":\"P13\",\"sizes\":{\"3D\":\"spear/2023-11/22/7399d58b-13c4-4240-ac02-9be0b14e51b8\",\"L\":\"spear/2023-11/22/e88b4e15-18d7-4a27-814e-0b8e813d63c1\"}},{\"name\":\"P14\",\"sizes\":{\"3D\":\"spear/2023-11/22/2e38baf6-668c-4001-831f-cf6db1af7ac6\",\"L\":\"spear/2023-11/22/784113ff-6fff-4575-ada2-56e138a44007\"}},{\"name\":\"P15\",\"sizes\":{\"3D\":\"spear/2023-11/22/e2f47cce-9f20-45db-830d-a6d1538a33e1\",\"L\":\"spear/2023-11/22/5591d359-a92a-40a4-9e16-34254e21b59a\"}},{\"name\":\"P16\",\"sizes\":{\"3D\":\"spear/2023-11/22/7e2cb036-7bb0-45a3-9a66-1e7c0904e237\",\"L\":\"spear/2023-11/22/91064c3f-24ba-42e8-adee-5c853a976d7c\"}},{\"name\":\"P17\",\"sizes\":{\"3D\":\"spear/2023-11/22/a7300221-6118-4b40-901e-db1b53e43c2b\",\"L\":\"spear/2023-11/22/d5b35ba2-d71c-409d-b652-0ddf7bf59e3c\"}},{\"name\":\"P18\",\"sizes\":{\"3D\":\"spear/2023-11/22/68020ca3-56ea-404e-8777-435fac394de8\",\"L\":\"spear/2023-11/22/45e622a1-eb2a-4318-babe-a4bf0c5ad84a\"}},{\"name\":\"P19\",\"sizes\":{\"3D\":\"spear/2023-11/22/e465a4ce-3221-425d-916a-6c30e87064e2\",\"L\":\"spear/2023-11/22/7177e3eb-5c8d-4ffd-a028-44e6666f8156\"}},{\"name\":\"P20\",\"sizes\":{\"3D\":\"spear/2023-11/22/f23a4986-e68e-41dc-8d07-37343731df24\",\"L\":\"spear/2023-11/22/c325a5ff-e050-4e54-90a0-c12e7a4acc87\"}},{\"name\":\"P21\",\"sizes\":{\"3D\":\"spear/2023-11/22/c40efa95-09cc-4668-90ce-801211dfc710\",\"L\":\"spear/2023-11/22/77cd273c-a4c9-4a4e-ada1-5c9b0ec32e49\"}},{\"name\":\"P22\",\"sizes\":{\"3D\":\"spear/2024-01/12/8db8fd0c-30cb-49c3-a96b-635ca771b7eb\",\"L\":\"spear/2024-01/12/9489dcd0-d1f6-4001-971f-4b295d721ad4\"}},{\"name\":\"P23\",\"sizes\":{\"3D\":\"spear/2024-01/12/a6ef5670-49bc-456e-8e46-f890ed20573a\",\"L\":\"spear/2024-01/12/89bf0bc9-e625-45fe-82fc-b7a22404125e\"}},{\"name\":\"P24\",\"sizes\":{\"3D\":\"spear/2024-01/12/51a65b36-b406-4122-a0cb-920d1a050564\",\"L\":\"spear/2024-01/12/e611b5d6-fd1f-4562-ae30-b7a148f30636\"}},{\"name\":\"P25\",\"sizes\":{\"3D\":\"spear/2024-01/12/b2062b8f-426f-4e85-8cd3-51275c06a975\",\"L\":\"spear/2024-01/12/ec458a79-a82a-4612-ab9f-07bc8213b5ea\"}},{\"name\":\"P26\",\"sizes\":{\"3D\":\"spear/2024-01/12/a10a21dc-c2ae-4e30-ba70-1bf95fa84a81\",\"L\":\"spear/2024-01/12/8d565a44-4e96-4121-8ed1-561043a79177\"}},{\"name\":\"P27\",\"sizes\":{\"3D\":\"spear/2024-01/12/ac715088-0045-4884-8477-20c5945c69e9\",\"L\":\"spear/2024-01/12/02065a9c-71ac-478c-a60d-1ce78e7e0d8d\"}},{\"name\":\"P28\",\"sizes\":{\"3D\":\"spear/2024-01/12/73012d2b-8b74-4d25-8b3b-055e0c55ab39\",\"L\":\"spear/2024-01/12/be49820e-954b-4544-aba8-d3c9feffc44e\"}},{\"name\":\"P29\",\"sizes\":{\"3D\":\"spear/2024-01/12/1c327ead-2146-4eef-953a-6fffb7a4f598\",\"L\":\"spear/2024-01/12/77ecf109-6c20-4695-947b-e4aa8eccf233\"}},{\"name\":\"P30\",\"sizes\":{\"3D\":\"spear/2024-01/12/f8d24058-0a92-4dbd-934e-0ecb35d78144\",\"L\":\"spear/2024-01/12/4693d215-a902-461d-bd85-85cadfac1a0b\"}},{\"name\":\"P31\",\"sizes\":{\"3D\":\"spear/2024-01/12/d0680a52-cf3d-4450-88b6-e3cb2bf202cf\",\"L\":\"spear/2024-01/12/03c1d787-3c73-4f96-b9e3-9fc8ec501b79\"}},{\"name\":\"P32\",\"sizes\":{\"3D\":\"spear/2024-01/12/f0064622-292c-4866-91e0-7ec478ec7267\",\"L\":\"spear/2024-01/12/715a1486-a9d1-4c12-829b-12c14d1b6ce4\"}},{\"name\":\"P33\",\"sizes\":{\"3D\":\"spear/2024-01/12/81d75137-826e-4f0a-8bc1-e21f6294aa35\",\"L\":\"spear/2024-01/12/ae20eab7-241b-4de1-b0dc-b52a81c3ad5f\"}},{\"name\":\"P34\",\"sizes\":{\"3D\":\"spear/2024-01/12/621777d4-aad0-40bf-b909-22a8e40adaf1\",\"L\":\"spear/2024-01/12/ec780955-1c7f-40c9-ba8a-ee1d56ac247b\"}},{\"name\":\"P35\",\"sizes\":{\"3D\":\"spear/2024-01/12/5a6ee5eb-c4ae-4f27-9185-9cf7c761c893\",\"L\":\"spear/2024-01/12/fafe28e7-5ce3-46a8-83f9-c70d673de4fd\"}},{\"name\":\"P36\",\"sizes\":{\"3D\":\"spear/2024-01/12/f76ae1b9-b0c4-48d2-9e17-40b84e3214bc\",\"L\":\"spear/2024-01/12/8a201841-8f83-44e5-8b2b-f3eb658a62bc\"}}]}",
      //     "displayName": "PRO LINE BREEZE SHORT SLEEVE 2-BUTTON BASEBALL JERSEY - WOVEN",
      //     "sex": "0",
      //     "price": 65,
      //     "mainColors": "",
      //     "customize": "",
      //     "limitFonts": null,
      //     "objFile": "obj3d/1743949414981.obj",
      //     "ladderPrice": null,
      //     "customId": null,
      //     "categoryId": null,
      //     "userAlternate": null,
      //     "enableLadderPrice": null,
      //     "currency": null,
      //     "fabricMap": null
      //   },
      // ]

      this.$http.post('/api/v1/pattern/list', { status: 1 }).then((res) => {
        const arr = (res.data.result || []).filter((item) => item.objFile)
        console.log('66', arr)
        const list = arr.map((item, index) => {
          return {
            id: item.id,
            name: item.name,
            path: 'https://cdn.koomaxsports.com/' + item.objFile,
            defaultDesignId: '',
            productType: 'jersey',
            isDefault: index === 0,
            model: item.model,
            price: item.price
          }
        })
        this.$store.dispatch('models/setModels', list);
        this.$store.dispatch('models/setSelectedModel', list[0].id)
        this.selectedModelId = this.selectedModel.selectedModelId

        this.setOne(list[0].id)
      }).finally(() => this.loading = false)
    },
    getFlower(id) {
      this.$http.get('/api/v1/group/fancy/flower?page=1&size=100&patternId=' + id).then((res) => {
        console.log('flower--', res.data.result.list || [])
      })
    },
    getColors() {
      this.$http.get('/api/v1/group/color').then((res) => {
        const arr = res.data.result || []
        const colors = arr.map((item) => {
          return {
            hex: item.rgb,
            name: item.name
          }
        })
        this.$store.dispatch('colors/setSelectColors', colors);
      })
    },
    getFonts() {
      this.$http.get('/api/v1/common/fonts').then((res) => {
        const arr = res.data.result || []
        const fonts = arr.map(item => item.name)
        this.$store.dispatch('colors/setSelectFonts', fonts);

        arr.forEach((item) => {
          this.loadFont(item.name, 'https://cdn.koomaxsports.com/' + item.url)
        })
      })
    },
    loadFont(name, fontPath) {
      // 创建 CSS 规则
      const fontStyle = `
        @font-face {
        font-family: '${name}';
        src: url('${fontPath}') format('woff2');
        font-weight: normal;
        font-style: normal;
      }
    `

      // 创建 style 元素并插入
      const style = document.createElement('style')
      style.textContent = fontStyle
      document.head.appendChild(style)

      // 可选：监听字体加载状态
      const font = new FontFace(`${name}`, `url(${fontPath})`)
      font.load().then(() => {
        document.fonts.add(font)
        console.log('字体加载完成')
      }).catch(err => {
        console.error('字体加载失败:', err)
      })
    },
    handleCanvasUpdate(texture) {
      console.log('收到纹理更新', texture);
      this.canvasTexture = texture;
    },

    handleDesignInit(controls) {
      this.designControls = controls;
      this.fabricCanvas = controls.canvas;

      console.log('7889', controls)
      // 设置选择变化回调
      controls.onSelectionChange = hasSelection => {
        console.log('选择变化:', hasSelection);
        this.hasSelection = hasSelection;
      };

      controls.onObjectSelected = object => {
        console.log('66-object', object)
        this.selectedObject = object;
      };

      // 拖拽处理
      const handleDragStart = () => {
        console.log('开始拖拽 - 禁用控制');
        this.isDraggingText = true;
      };

      const handleDragEnd = () => {
        console.log('结束拖拽 - 启用控制');
        this.isDraggingText = false;
      };

      controls.onDragStart = handleDragStart;
      controls.onDragEnd = handleDragEnd;

      // 对象添加处理
      controls.onObjectAdded = object => {
        if (!object.id) {
          const id = Math.random().toString(36).substr(2, 9);
          object.id = id;

          const newDecoration = {
            id,
            type: object.type === 'i-text' ? 'text' : 'image',
            properties: this.getObjectProperties(object)
          };

          this.$store.dispatch('decorations/addDecoration', newDecoration);
        }
      };

      // 对象移除处理
      controls.onObjectRemoved = object => {
        if (object.id) {
          this.$store.dispatch('decorations/removeDecoration', object.id);
        }
      };
    },

    getObjectProperties(object) {
      const baseProps = {
        left: object.left || 0,
        top: object.top || 0,
        scaleX: object.scaleX || 1,
        scaleY: object.scaleY || 1,
        angle: object.angle || 0
      };

      if (object.type === 'i-text') {
        return {
          ...baseProps,
          text: object.text || '',
          fontFamily: object.fontFamily || 'Arial',
          fill: object.fill || '#000000',
          strokeWidth: object.strokeWidth || 0,
          stroke: object.stroke || '#000000'
        };
      } else {
        return {
          ...baseProps,
          src: object.getSrc()
        };
      }
    },

    handleAddText() {
      this.isPlacingText = true;
      this.currentView = '3D';
    },

    handleInteract(uv) {
      if (this.isPlacingText && this.designControls) {
        this.designControls.addText(uv);
        this.isPlacingText = false;
        this.isInTextProperties = true;

        const lastAddedText = this.fabricCanvas?.getObjects()
            .filter(obj => obj.type === 'i-text')
            .pop();

        console.log('lastAddedText---', lastAddedText)
        if (lastAddedText) {
          this.selectedObject = lastAddedText;
          this.fabricCanvas?.setActiveObject(lastAddedText);

          if (lastAddedText.id) {
            this.$store.dispatch('decorations/setSelectedDecoration', lastAddedText.id);
          }
        }
      } else if (this.isPlacingImage && this.pendingImageFile && this.designControls) {
        this.designControls.addImage(this.pendingImageFile, uv);
        this.isPlacingImage = false;
        this.isInTextProperties = false;
        this.pendingImageFile = null;
      } else if (this.designControls && !this.isPlacingText && !this.isPlacingImage) {
        this.designControls.handleInteraction(uv);
      }
    },

    handleScreenshot() {
      this.isScreenshotting = true;
      return new Promise(resolve => {
        setTimeout(() => {
          const canvas = document.querySelector('canvas');
          const screenshot = canvas?.toDataURL('image/png');
          this.isScreenshotting = false;
          resolve(screenshot);
        }, 100);
      });
    },

    handleTextUpdate: debounce(function(updates) {
      console.log('ssss', updates)
      if (updates === null) {
        this.isInTextProperties = false;
        this.selectedObject = null;
        if (this.fabricCanvas) {
          this.fabricCanvas.discardActiveObject();
          this.fabricCanvas.renderAll();
        }
        this.$store.dispatch('decorations/setSelectedDecoration', '');
      } else {
        this.isInTextProperties = true;
        if (this.designControls && this.selectedObject && this.selectedObject.id) {
          this.selectedObject.set(updates);

          if (this.fabricCanvas) {
            this.fabricCanvas.setActiveObject(this.selectedObject);
          }

          requestAnimationFrame(() => {
            if (this.fabricCanvas) {
              this.fabricCanvas.renderAll();
            }

            this.designControls.updateObject(updates);
            this.$store.dispatch('decorations/updateDecoration', {
              id: this.selectedObject.id,
              properties: this.getObjectProperties(this.selectedObject)
            });
          });
        }
      }
    }, 32),

    handleImageSelect(file) {
      this.pendingImageFile = file;
      this.isPlacingImage = true;
      this.currentView = '3D';
    },

    handleSelectDecoration(id) {
      console.log(555, this.designControls, id)
      this.currentView = '3D';
      if (this.designControls) {
        const decoration = this.decorations.find(d => d.id === id);
        console.log(767, decoration)
        if (decoration) {
          this.designControls.updateObject(decoration.properties);
          this.designControls.handleInteraction({
            x: decoration.properties.left / 500,
            y: decoration.properties.top / 500,
            type: 'mousedown',
            clientX: 0,
            clientY: 0
          });

          this.$store.dispatch('decorations/setSelectedDecoration', id);

          if (decoration.type === 'text') {
            const textObject = this.fabricCanvas?.getObjects().find(obj => obj.id === id);
            if (textObject) {
              this.selectedObject = textObject;
              this.isInTextProperties = true;
            }
          } else {
            this.isInTextProperties = false;
          }
        }
      }
    },

    handleDeleteDecoration(id) {
      if (this.designControls) {
        this.$store.dispatch('decorations/removeDecoration', id);
      }
    },

    toggleView() {
      this.currentView = this.currentView === '3D' ? '2D' : '3D';
    },

    handleModelChange(modelId) {
      this.$store.dispatch('models/selectModel', modelId);
      this.selectedModelId = this.selectedModel.selectedModelId

      this.setOne(modelId)
    },
    setOne(modelId) {
      this.$http.get('/api/v1/group/fancy/flower?page=1&size=100&patternId=' + modelId).then((res) => {
        const list  = res.data.result.list || []
        let designs = []
        const data = this.selectedModel.models.find((item) => item.id === modelId)
        const model = JSON.parse(data.model)
        const patterns = model.patterns || []
        patterns.forEach((sItem) => {

          const part = list.find((i) => i.displayName === sItem.name)
          for (let key in sItem.sizes) {
            if (key === 'L') {
              designs.push({
                id: sItem.name + key,
                name: sItem.name + '_' + key,
                path: 'https://builder.dynamicteamsports.com/apis/assets/' + sItem.sizes['3D'] + '/data.svg',
                thumbnailPath: 'https://builder.dynamicteamsports.com/apis/assets/' + sItem.sizes['L'] + '/data.svg',
                modelId: data.id,
                price: data.price,
                previewUrl: part?.url ? 'https://builder.dynamicteamsports.com/client/api/v1/common/svg/4948/' + part.url + '?colors=130,131,132' : '',
                productType: 'jersey'
              })
            }
          }
        })
        this.$store.dispatch('designs/setDesigns', designs)
        this.$store.dispatch('designs/setSelectedProductType', data.productType)
      })
    }
  },
  watch: {
    selectedObject(newVal) {
      if (!newVal || newVal.type !== 'i-text') {
        this.isInTextProperties = false;
      }
    }
  }
};
</script>

<style scoped>
.designer-container {
  display: flex;
  height: 100%;
  width: 100%;
}

.design-area {
  position: relative;
  flex: 1;
  width: 0;
  overflow: hidden;
}

.model-selector {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
}

.model-selector /deep/ .el-select {
  width: 200px;
}

.view-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.view-container.active-view {
  opacity: 1;
  pointer-events: auto;
}

.view-container.placing-text {
  cursor: crosshair;
}

.placement-hint {
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  z-index: 50;
}

.view-toggle-button {
  position: absolute;
  top: 1rem;
  right: 2rem;
  background-color: white;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 10;
  cursor: pointer;
  border: none;
  outline: none;
}

.view-toggle-button:hover {
  background-color: #f5f5f5;
}

.view-toggle-button i {
  font-size: 1.25rem;
  color: #606266;
}
</style>
